<template>
    <div class="uploadContainer">
    <Upload
        :headers="tokenHearder"
        multiple type="drag"
        :action="uploadPath"
        :max-size="maxSize"
        :data="fileList"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload"
        ref="upload"
        :show-upload-list="false"
        >
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>Select file or drag file to upload (file size should not exceed 300M)</p>
            <p>Click or drag files here to upload</p>
        </div>
    </Upload>
    </div>
</template>

<script>
import cookie from '@/lib/cookie.js';
import { fileApi } from "@/api/file.js";
    export default {
        name: "upload",
        components: {},
        props: {
          //是否为更新表单
          parentFolderId: {
            type: Number,
            default: 1,
          },
        },
        data() {
          return {
            filterText: null,
            uploadPath:'',
            maxSize:300*1024,
            tokenHearder:'',
            fileId:1,    //1为文件 0为文件夹
            fileList:[],
             uploadList: [],
          };
        },
        watch: {
            parentFolderId: function (newValue, oldValue) {
                this.fileId = newValue;
                this.uploadPath = fileApi.fileUploadLocalUrl+this.fileId;
            },
        },
        mounted() {
            //初始化获取一级文件夹
            this.uploadPath = fileApi.fileUploadLocalUrl+this.fileId;
            //初始化获取token
            this.tokenHearder = {'x-access-token': cookie.getToken()};
            this.uploadList = this.$refs.upload.fileList;
        },
        created() {},
        methods: {
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                this.$Message.success(res.msg);
                this.$emit("on-form-close");
            },
            handleError (res, file) {
                this.$Message.error(res.msg);
                console.log(res, file,222222222222222);
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '文件大小超出300M',
                    desc: 'File  ' + file.name + ' is too large, no more than 300M.'
                });
            },
            handleBeforeUpload (data1,data2) {
                console.log(this.uploadList)
                const check = this.uploadList.length < 10;
                if (!check) {
                    this.$Notice.warning({
                    title: "最多一次上传" + 10 + "张",
                    });
                }
                return check;
            }
        }
    }
</script>
<style lang="less">
    .uploadContainer{
      height:350px;
      .ivu-upload-list{
        height:200px;
        overflow-y:auto ;
      }
    }
</style>